<template>
    <div id="container-o">
        <div class="track-s">
            <el-card class="track-s-c" shadow="always">
                <div class="track-s-c">
                    <span class="track-cla">轨迹回放控制</span>
                    <el-row :gutter="10">
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <div @click="startAnimation" class="set-s">开始循迹</div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <div @click="pauseAnimation" class="set-s">暂停循迹</div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <div @click="resumeAnimation" class="set-s">继续循迹</div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <div @click="stopAnimation" class="set-s">停止循迹</div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                            <div @click="exitClick" class="set-s set-s-o">退出循迹</div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw , watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import aqm from '../img/aqm.png'
export default defineComponent( {
    name: 'v-map',
    components: {},
    props: {
        detailInfo: {
            type: String,
            default: ''
        },
        isUseDialog: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const map:any = ref(null)
        const AMap:any = ref(null)
        const markers:any = ref()
        let lineArr:any = []

        const initMap = async() => {
			try {
				let AMaps = await AMapLoader.load({
					key: "60325c6451fa7d3637f4c862898cc342", // 申请好的Web端开发者Key，首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: [
						'AMap.CircleEditor',
						'AMap.PolygonEditor',
						'AMap.Polygon',
						'AMap.PolyEditor',
						'AMap.ToolBar',
						'AMap.Scale',
						'AMap.OverView',
						'AMap.MapType',
						'AMap.Geolocation',
						'AMap.AutoComplete',
						'AMap.PlaceSearch',
                        'AMap.Geocoder',
                        'AMap.MoveAnimation'
					], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				})
				map.value = new AMaps.Map("container-o", { //设置地图容器id
					viewMode: "2D", //是否为3D地图模式
					zoom: 17, //初始化地图级别
					center: lineArr[0], //初始化地图中心点位置
                    resizeEnable: true,
				})
                let marker = new AMaps.Marker({  //创建标记
                    position: new AMaps.LngLat(lineArr[0][0] , lineArr[0][1]),
                    icon: new AMaps.Icon({
                        size: new AMaps.Size(30,30),
                        image: aqm,
                        imageSize: new AMaps.Size(25,25)
                    }),
                    offset: new AMaps.Pixel(-13, -26),
                })
                // // 绘制轨迹
                let polyline = new AMaps.Polyline({
                    map: map.value,
                    path: lineArr,
                    showDir:true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                })

                let passedPolyline = new AMaps.Polyline({
                    map: map.value,
                    // path: lineArr,
                    strokeColor: "#AF5",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                })
                map.value.add(marker)
                map.value.add(polyline)
                map.value.add(passedPolyline)
				AMap.value = AMaps
                marker.on('moving', (e:any) => {
                    passedPolyline.setPath(e.passedPath)
                })
                markers.value = marker
			} catch (err) {
				console.log(err)
			}
		}

        /*** startAnimation 开始动画 */
        const startAnimation = () => {
            toRaw(markers.value).moveAlong(lineArr,{
                duration: 500,
                autoRotation: true,
            })
        }

        /*** pauseAnimation 暂停动画 */
        const pauseAnimation = () => {
            toRaw(markers.value).pauseMove()
        }

        /*** resumeAnimation 继续动画 */
        const resumeAnimation = () => {
            toRaw(markers.value).resumeMove()
        }

        /*** stopAnimation 停止动画 */
        const stopAnimation = () => {
            toRaw(markers.value).stopMove()
        }

        /*** exitClick 退出事件 */
        const exitClick = () => {
            ctx.emit('exitClick')
        }

        /*** onMounted 页面加载时显示 */
        onMounted(async() => {
            let setTime = setInterval(() => {
                if(props.detailInfo !== ''){
                    console.log('2')
                    lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
                    initMap()
                    clearInterval(setTime)
                }
            },20)
        })

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                let setTime = setInterval(() => {
                    if(props.detailInfo !== ''){
                        lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
                        initMap()
                        clearInterval(setTime)
                    }
                },20)
            }
        })

        return {
            startAnimation,
            pauseAnimation,
            resumeAnimation,
            stopAnimation,
            exitClick,
        }
    },
} )
</script>
<style scoped lang="scss">
.track-s{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 300px;
    margin-top: 10px;
    margin-left: 10px;
    .track-s-c{
        width: 100%;
        height: 100%;
        .track-cla{
            display: block;
            height: 32px;
            line-height: 32px;
            font-weight: bold;
            border-bottom: 1px solid #E5EAF3;
            padding-left: 10px;
        }
        .set-s{
            border: 1px solid #409EFF;
            color: #409EFF;
            text-align: center;
            cursor:pointer; 
            height: 32px;
            line-height: 32px;
            margin-top: 10px;
        }
        .set-s-o{
            border: none;
            background-color: #E6A23C;
            color: #FFFFFF;
        }
    }
}
</style>